/*多类型选择器开始*/
.notebox {
    border: 4px solid #666;
    padding: .5em;
}

.notebox.warning {
    border-color: orange;
    font-weight: bold;
}

.notebox.danger {
    border-color: red;
    font-weight: bold;
}

/*多类型选择器结束*/
/*分隔的div*/
.line-br {
    width: 100%;
    height: 20px;
}

/*id 选择器开始*/
h1#heading {
    color: rebeccapurple;
}

#one {
    background-color: yellow;
}

/*id 选择器结束*/

/*伪类和伪元素使用开始*/
article p:first-child {
    font-size: 120%;
    font-weight: bold;
}

/*伪类和伪元素使用结束*/
/*用户行为伪类开始*/
a:link,
a:visited {
    color: rebeccapurple;
    font-weight: bold;
}

a:hover {
    color: red;
}

/*用户行为伪类结束 :hover-鼠标悬浮 :focus-键盘点击时间*/

/*伪元素开始*/
div article p::first-line {
    font-size: 120%;
    font-weight: bold;
}

/*伪元素结束*/
/*后代选择器开始*/
.box p {
    color: red;
}

/*后代选择器结束*/

/*子代关系选择器开始*/
ul > li {
    border-top: 5px solid red;
}
/*子代关系选择器结束*/

/*邻接兄弟选择器开始*/
h1 + p {
    font-weight: bold;
    background-color: #333333;
    color: #FFFFFF;
    padding: .5em;
}
/*邻接兄弟选择器结束*/
/*盒子模型开始*/
.box {
    width: 300px;
    height: 150px;
    border: solid 5px rebeccapurple;
    background-color: lightgray;
    padding: 40px;
    margin: 40px;
}

.alternate {
    width: 390px;
    height: 240px;
    box-sizing: border-box;
}
/*盒子模型结束*/

/*行内块开始*/
#disPlaySpan {
    width: 80px;
    height: 50px;
    margin: 20px;
    padding: 20px;
    background-color: lightblue;
    border: 2px solid blue;
}

#disPlaySpan1 {
    width: 80px;
    height: 50px;
    margin: 20px;
    padding: 20px;
    background-color: lightblue;
    border: 2px solid blue;
    display: inline-block;
}
/*行内块结束*/